<template>
  <view class="loadedGif" v-if="showLoaded">
    <view class="loading-box">
      <!-- <image src="https://100000063-1252208446.file.myqcloud.com/images/loading-b.gif" /> -->
      <image class="svg_img loading_anime" :src="circleSvgImg" />
      <image class="svg_img" :src="mSvgImg" />
    </view>
  </view>
</template>
<script>
  export default {
    props: {
      showLoaded: Boolean
    },
    data() {
      return {
        circleSvgImg: "",
        mSvgImg: "",
      };
    },
    mounted() {
      let merchantInfo = uni.getStorageSync('merchantInfo');
      const { loadingSvg_Circle, loadingSvg_M } = require('./loading.svg.js');
      this.circleSvgImg = loadingSvg_Circle('#CB171A');
      this.mSvgImg = loadingSvg_M('#CB171A');
    },
    watch: {
      showLoaded: function(newVal, oldVal) {
        this.showLoaded = newVal;
      }
    }
  };
</script>
<style lang="less">
  .loadedGif {
    width: 100%;
    height: 100vh;
    background: #FDFDFD;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .loading-box{
    width: 100rpx;
    height: 100rpx;
    position: relative;
  }

  .svg_img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }

  .loading_anime {
    transform: rotate(0deg);
    animation: run 10s cubic-bezier(0.28, 0.35, 0.07, 0.96) infinite;
  }

  @keyframes run {
    0% {
      transform: rotate(0deg);
    }

    25% {
      transform: rotate(90deg);
    }

    50% {
      transform: rotate(180deg);
    }

    75% {
      transform: rotate(270deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
</style>
